<template>
    <view class="content">
        <view class="bottom-lists">
            <view class="bottom-list" :class="{'active':current_list==item.id}" v-for="item in titleData" :key="item.id"
                @click="handler" :data-id="item.id">
                {{item.title}}
            </view>
        </view>
        <view class="bottom-content">
            <swiper :autoplay="false" @change="tabChange" :current="current_list">
                <!-- 推荐 -->
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y="true">
                        <view style="display: flex;flex-wrap: wrap;">
                            <navigator class="wrapper" v-for="(item, index) in activityList" @click="toDetail(item.id)"
                                :key="item.id">
                                <image :src="item.poster" class="w-img"></image>
                                <!-- <view class="text">
                                    {{item.headlne}}
                                </view> -->
                                <view>{{item.headlne}}</view>
                                <view class="footer">
                                    <view class="users">
                                        <image src="../../static/D-49/image_2_1_3x.png" class="users-avatar">
                                        </image>
                                        <text class="users-name">{{item.publisherId}}</text>
                                    </view>
                                    <!-- <view class="browse">
                                        <image src="../../static/icon/icons/eye.png" class="browse-img"></image>
                                        <text class="browse-count">6.3W</text>
                                    </view> -->
                                </view>
                            </navigator>
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
    import api from '@/api/api.js'
    export default {
        data() {
            return {
                mask: false,
                menuFlag: false,
                titleData: [{
                        id: 0,
                        title: "全部"
                    },
                    {
                        id: 1,
                        title: "科技"
                    },
                ],
                current_list: 0,
                elemList: [
                    1
                ],
                isBlock: false,
                pageSize: 10,
                currentPage: 1,
                activityList: [
                    {
                        id: 1,
                        poster: '../../static/D-49/image_4_3x.png',
                        headlne: "测试",
                        publisherId: "tom"
                    }
                ]
            }
        },
        onLoad() {
            this.getActivityList({
                currentPage: this.currentPage,
                pageSize: this.pageSize
            })
        },
        methods: {
            clickMenu() {
                this.menuFlag = !this.menuFlag;
            },
            handler(e) {
              	 this.current_list = e.target.dataset.id
            },
            tabChange(e) {
                this.current_list = e.detail.current
            },
            block() {
                this.isBlock = !this.isBlock
            },
            openPopup() {
              	 this.$refs.popupRef.show()
            },
            closePopup() {
                this.$refs.popupRef.close()
            },
            change() {},
            // 详情页面
            toDetail(id) {
            	uni.navigateTo({
            		url: "/pages/applicationForm/application?id="+id
            	})
            },
            async getActivityList(data) {
            	console.log(data)
            	const res = await api.activity.getActivityList(data)
                console.log(res)
            	if (res.code === 200) {
                    console.log(res.data.list)
            		this.activityList = res.data.list
            	}
            },
        }
    }
</script>

<style>
    /* 全局样式 */
    .myRing {
        width: 100vw;
        height: auto;
    }

    /* 顶部 */
    .top {
        width: 100%;
        height: 300rpx;
        position: relative;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 92rpx;
    }

    .top-img {
        width: 100%;
        height: 300rpx;
        position: absolute;
        top: 0;
        right: 0;
    }

    .title {
        position: absolute;
        left: 30rpx;
        bottom: 70rpx;
        display: flex;
        align-items: center;
    }

    .myRing-name {
        font-family: PingFang SC;
        font-size: 40rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #ffffff;
    }

    .crown {
        width: 70rpx;
        height: 70rpx;
        margin: 0 5rpx;
    }

    .rank {
        height: 28rpx;
        font-family: PingFang SC;
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #f5f51b;
    }

    .float {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: -300rpx;
        display: flex;
        box-sizing: border-box;
        margin: auto;
        padding: 32rpx 30rpx;
        background-color: white;
        border-radius: 20rpx;
        width: 690rpx;
        height: 104rpx;
        background-color: #ffffff;
        box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 20rpx;
    }

    .inner {
        width: 50%;
        text-align: center;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #252525;
    }

    .inner:nth-child(1) {
        border-right: 3rpx solid #E4E4E4;
        text-align: left;
    }

    .triangle {
        width: 35rpx;
        height: 35rpx;
        vertical-align: middle;
    }

    /* 中部 */
    .middle {
        width: 690rpx;
        height: 286rpx;
        background-color: #ffffff;
        box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
        border-radius: 20rpx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    .middle-box {
        width: 50%;
        padding: 0 30rpx;
        box-sizing: border-box;
    }

    .middle-title {
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #252525;
    }

    .middle-content {
        margin-top: 20rpx;
    }

    .myRing-avatar {
        width: 60rpx;
        height: 48rpx;
        border-radius: 4rpx;
        vertical-align: middle;
    }

    .content-name {
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #373737;
        margin-left: 12rpx;
    }

    /* 尾部 */
    swiper {
        height: calc(100vh - 610rpx);
    }

    scroll-view {
        height: calc(100vh - 610rpx);
    }

    .bottom-lists {
        display: flex;
        margin: 22rpx 0;
        margin-left: 30rpx;
    }

    .bottom-list {
        margin-left: 30rpx;
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #7a7a7a;
    }

    .active {
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #373737;
        padding-bottom: 10rpx;
        border-bottom: 4rpx solid rgba(245, 97, 12, 1);
    }

    .bottom-content {
        width: 690rpx;
        margin: 0 auto;
    }

    .swiper-item {
        display: flex;
        justify-content: space-between;
    }

    .wrapper {
        width: 330rpx;
        height: 450rpx;
        margin-right: 15rpx;
        margin-top: 20rpx;
    }

    .w-img {
        width: 330rpx;
        height: 300rpx;
        border-radius: 20rpx;
    }

    .text {
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #393939;
    }

    .footer {
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;
    }

    .users-avatar {
        width: 30rpx;
        height: 30rpx;
        vertical-align: middle;
        margin-right: 5rpx;
    }

    .users-name {
        font-family: PingFang SC;
        font-size: 18rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #979797;
    }

    .browse-img {
        width: 35rpx;
        height: 25rpx;
        margin-right: 3rpx;
    }

    .browse-count {
        font-family: PingFang SC;
        font-size: 18rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: #979797;
    }

    #circle-link {
        width: 64rpx;
        height: 64rpx;
        position: fixed;
        top: 900rpx;
        right: 30rpx;
        z-index: 99;
    }

    .circle-link {
        width: 64rpx;
        height: 64rpx;
    }

    .swiper-item-link {
        width: 98%;
        margin: 0 auto;
        padding-bottom: 8rpx;
        height: 34rpx;
        display: flex;
    }

    .swiper-item-title-img {
        width: 100rpx;
        height: 36rpx;
        background-color: rgba(79, 79, 233, 1);
        border-radius: 4rpx;
        vertical-align: middle;
        text-align: center;
        font-family: PingFang SC;
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(255, 255, 255, 1);
    }

    .swiper-item-title {
        width: 448rpx;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(81, 81, 81, 1);
        margin-left: 15rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .swiper-item-box {
        width: 98%;
        height: auto;
        margin: 0 auto;
    }

    .swiper-item-box-wrapper {
        margin: 0 auto;
        width: 100%;
        height: auto;
        border-top: solid 1rpx rgba(219, 219, 219, 1);
        margin: 0 auto;
        background-color: white !important;
    }

    .swiper-item-box-top {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        padding: 28rpx 0;
    }

    .users-avatar {
        width: 64rpx;
        height: 64rpx;
        vertical-align: middle;
        border-radius: 50%;
    }

    .browse {
        margin-left: 16rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
    }


    .users-name {
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(81, 81, 81, 1);
    }

    .car {}

    .car-logo {
        width: 24rpx;
        height: 24rpx;
        vertical-align: middle;
    }

    .swiper-item-box-top-browse {
        display: flex;
        flex-flow: column;
        margin-left: 16rpx;
        justify-content: space-around;
    }

    .car-name {
        font-family: PingFang SC;
        font-size: 18rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: rgba(81, 81, 81, 1);
    }

    .attention {
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: rgba(245, 97, 12, 1);
        flex-grow: 1;
        text-align: right;
    }

    /* .swiper-item-box-middle {} */

    .swiper-item-box-middle-top {
        display: flex;
        justify-content: space-between;
    }

    .swiper-item-box-middle-text {
        font-family: PingFang SC;
        font-size: 24rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(81, 81, 81, 1);
    }

    .swiper-item-box-middle-like {
        width: 58rpx;
        height: 42rpx;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .like-img {
        width: 30rpx;
        height: 30rpx;
    }

    .like-count {
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(184, 184, 184, 1);
    }

    .swiper-item-box-middle-imgs {
        display: flex;
        justify-content: space-evenly;
        margin-top: 10rpx;
    }

    .swiper-item-box-middle-img-a {
        width: 210rpx;
        height: 180rpx;
    }

    .swiper-item-box-middle-img-b {
        width: 49%;
        height: 168rpx;
    }

    .swiper-item-box-bottom {
        margin-top: 36rpx;
    }

    .swiper-item-box-bottom-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .swiper-item-box-bottom-top-info {
        margin-left: 20rpx;
        display: flex;
        align-items: center;
    }

    .info-avatar {
        width: 34rpx;
        height: 34rpx;
    }

    .info-name {
        font-family: PingFang SC;
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: rgba(184, 184, 184, 1);
        margin-left: 16rpx;
    }

    .swiper-item-box-bottom-inner {
        margin-left: 20rpx;
        padding: 16rpx 0;
        font-family: PingFang SC;
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(75, 75, 75, 1);
    }

    .swiper-item-box-foot {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
    }

    .share-it {
        padding: 0 20rpx;
    }

    .foot-comment {}

    .foot-time {
        font-family: PingFang SC;
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(95, 95, 95, 1);
        flex-grow: 1;
        text-align: right;
    }

    .foot-img {
        width: 50rpx;
        height: 50rpx;
        vertical-align: middle;
    }

    .foot-img-img {
        width: 30rpx;
        height: 30rpx;
        vertical-align: middle;
        margin-right: 15rpx;
    }

    .foot-text {
        font-family: PingFang SC;
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(93, 93, 93, 1);
    }

    .square-link {
        width: 184rpx;
        height: 64rpx;
        background-color: rgba(245, 97, 12, 0.93);
        border-radius: 32rpx;
        position: fixed;
        top: 900rpx;
        right: 108rpx;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        z-index: 99;
    }

    .square-link-img {
        width: 58rpx;
        height: 58rpx;
        margin-top: 10rpx;
    }

    .popup-all {
        width: 100vw;
    }

    .popup-top {
        height: 360rpx;
        display: flex;
        background-color: #F5F5F5;
    }

    .popup-bottom {
        height: 150rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .popup-item {
        padding: 36rpx;
    }

    .popup-icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
    }

    .popup-text {
        font-family: PingFang SC;
        font-size: 20rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(50, 50, 50, 1);
    }

    .cancel {
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 34rpx;
        letter-spacing: 0rpx;
        color: rgba(50, 50, 50, 1);
        background-color: #FFFFFF;
    }

    .menu {
        position: fixed;
        width: 34rpx;
        height: 34rpx;
        border-radius: 50%;
        right: 5rpx;
        bottom: 224rpx;
        z-index: 999;
    }

    .menuTrigger {
        position: absolute;
        top: 0;
        right: 0;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        cursor: pointer;
        transition: .35s ease;
    }

    .menuItem {
        position: absolute;
        width: 34rpx;
        height: 34rpx;
        top: 0upx;
        left: 10upx;
        padding: 20upx;
        border-radius: 50%;
        border: none;
        z-index: -1000;
        opacity: 0;
        background-color: rgb(245, 97, 12);
    }

    .menuItem1 {
        transition: .35s ease;
    }

    .menuItem2 {
        transition: .35s ease .1s;
    }

    .menuItem3 {
        transition: .35s ease .2s;
    }

    .menu.active .menuTrigger {
        transform: rotateZ(225deg);
    }

    .menu.active .menuItem1 {
        top: -106upx;
        left: -120upx;
        opacity: 1;
    }

    .menu.active .menuItem2 {
        top: 10upx;
        left: -164upx;
        opacity: 1;
    }

    .menu.active .menuItem3 {
        top: 126upx;
        left: -120upx;
        opacity: 1;
    }
</style>
